<template>
  <div class="list">
    <!-- 搜索功能 -->
    <van-search v-model="value" placeholder="搜索好货" :fixed="true" />
    <!-- 侧边导航 -->
    <div class="list_main">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :to="{ name: 'List', query: { id: item.id } }"
            v-for="item in category"
            :key="item.id"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <!-- 商品 -->
      <div class="right">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
        >
          <van-grid :column-num="2" :gutter="10" icon-size="110px">
            <van-grid-item
              v-for="item in searchProduct"
              :key="item.id"
              :price="item.price.toFixed(2)"
              :icon="item.coverImage | dalImg"
              :text="item.name"
              @click="toDetail(item.id)"
            />
          </van-grid>
          <!-- 两种布局 -->
          <!-- <van-card
            v-for="item in product"
            :key="item.id"
            :price="item.price.toFixed(2)"
            :title="item.name"
            :thumb="item.coverImage | dalImg"
            @click-thumb="toDetail(item.id)"
          /> -->
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
// 获取商品的分类
import { loadCategoryAPI } from "@/services/products";
// 商品列表
import { loadDataAPI } from "@/services/products";
export default {
  data() {
    return {
      value: "",
      loading: false, //到底加载
      finished: false, //是否停止
      page: 1, //当前页
      pages: 1, //总页
      activeKey: 0,
      category: [], //分类
      product: [], //商品列表
    };
  },

  async created() {
    // 商品分类
    // const ctg = await loadCategoryAPI();
    // this.category = ctg.data;

    // 商品列表

    this.loadData();
    const res = await loadCategoryAPI();
    this.category = res.data;

    // 判断是从哪个路由进入的，activeKey应该被谁选中
    this.activeKey = this.category.findIndex(
      (item) => item.id == this.$route.query.id
    );
  },
  beforeRouteUpdate(to, from, next) {
    this.product = [];
    this.finished = false;
    this.page = 1;
    next();
    this.loadData();
  },
  methods: {
    async loadData() {
      // 开始加载数据的时候设置为true
      this.loading = true;
      const plist = await loadDataAPI(this.page, this.$route.query.id);
      this.product.push(...plist.data);
      this.page += 1;
      // 返回的数据中有pages属性把他赋this.pages
      this.pages = plist.pages;
      // 数据加载完成后设置为false
      this.loading = false;
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
    // 列表跳详情
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
  },
  computed: {
    searchProduct() {
      return this.product.filter((item) => item.name.indexOf(this.value) > -1);
    },
  },
};
</script>

<style scoped>
.list_main {
  display: flex;
  height: calc(100% - 54px);
}

.list_main .right {
  flex: 1;
  overflow: auto;
  height: 100%;
}
</style>
